<template>
  <h2>toRaw和markRaw</h2>
  <h3>state:{{state}}</h3>
  <hr>
  <button @click="textToRaw">测试toRaw</button>
  <button @click="textMarkRaw">测试markRaw</button>
</template>
<script lang="ts">
import { defineComponent, markRaw, reactive, toRaw} from 'vue';
export default defineComponent({
  name: 'App',
  
  setup(){
    const state=reactive<any>({
      name:"小明",
      age:20
    })
    const textToRaw=()=>{
      // 把代理对象变成了普通对象了，数据变化，界面不变化
      const user=toRaw(state)
      user.name+="=="
    }
    // markRaw标记的对象数据，从此以后都不能再成为代理对象了
    const textMarkRaw=()=>{
      const likes=['吃','喝']
      state.likes=markRaw(likes)
      setInterval(()=>{
        state.likes[0]+="=="
        console.log("定时器执行了");
        
      },1000)
    }
    return{
      state,
      textToRaw,
      textMarkRaw
    }
  }
});
</script>